<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link type="text/css" rel="stylesheet" th:href="@{/css/style.css}"/>
        <!--&lt;!&ndash;[if IE 6]>-->
        <!--<script th:src="{js/iepng.js}" type="text/javascript"></script>-->
        <!--    <script type="text/javascript">-->
        <!--       EvPNG.fix('div, ul, img, li, input, a'); -->
        <!--    </script>-->
        <!--<![endif]&ndash;&gt;-->
        <script type="text/javascript" th:src="@{/js/jquery-1.11.1.min_044d0927.js}"></script>
        <script type="text/javascript" th:src="@{/js/jquery-1.8.2.min.js}"></script>
        <script type="text/javascript" th:src="@{/js/menu.js}"></script>
        <script type="text/javascript" th:src="@{/js/select.js}"></script>
        <title>尤洪</title>
        <script type="text/javascript" th:inline="javascript">
            //获取协议名称
            var scheme = [[${#request.getScheme()}]];
            //获取服务器名称
            var serverName = [[${#request.getServerName()}]];
            //获取服务器端口号
            var serverPort = [[${#request.getServerPort()}]];
            //获取上下文根
            var contextPath = [[${#request.getContextPath()}]]
            var allPath = scheme + "://" + serverName + ":" + serverPort + contextPath;
            var pn = 1;
            var ps = 2;
            var lp;

            $(function () {

                //当页面加载完毕后调用显示购物车中商品信息的函数
                showCar();
                showOrder();
            })

            function showOrder() {
                $.ajax({
                    url: allPath + "/product/orderPageList.do",
                    data: {
                        "userId": [[${session.loginUser.id}]],
                        "pageNum": pn,
                        "pageSize": ps,
                    },
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        lp = data.pageTotalNum;
                        var html = "";
                        $.each(data.dataList, function (i, n) {
                            html += '<tr>';
                            html += '<td><font color="#ff4e00">' + n.id + '</font></td>';
                            html += '<td>' + n.orderTime + '</td>';
                            html += '<td>￥' + n.money + '</td>';
                            html += '<td>' + n.address + '</td>';
                            html += '<td><font color="#ff4e00">' + n.psMethod + '</font></td>';
                            html += '</tr>';
                        })

                        $("#orderBody").html(html);
                        $("#pageInfo").html("总共" + data.totalRows + " 当前" + data.pageNum + "/" + data.pageTotalNum + "页");
                        fyNum();
                    }
                })
            }

            function goPage(n) {
                if (n < 1) {
                    alert("当前已经是首页了!");
                    return;
                }
                if (n > lp) {
                    alert("当前已经是末页了!")
                    return;
                }
                pn = n;
                showOrder();
            }

            function goPageByNum() {
                var pageNumInput = $("#pageNum").val();
                goPage(pageNumInput);
                //动态刷新后将输入框中的数据清空
                $("#pageNum").val("");
            }

            function selectChange(e) {
                ps = $(e).val();
                goPage(pn);
            }

            //显示分页的数字
            function fyNum() {
                var str = "";
                if (pn <= 3) {
                    for (var i = 1; i <= pn; i++) {
                        str += '<a href="javascript:void(0);" class="cur" onclick="goPage(' + i + ')">' + i + '</a>';
                    }
                }
                if (pn > 3) {
                    for (var i = pn - 2; i <= pn; i++) {
                        str += '<a href="javascript:void(0);" onclick="goPage(' + i + ')">' + i + '</a>';
                    }
                }
                if (pn <= lp - 2) {
                    for (var i = pn + 1; i <= pn + 2; i++) {
                        str += '<a href="javascript:void(0);" onclick="goPage(' + i + ')">' + i + '</a>';
                    }
                }

                if (pn > lp - 2) {
                    for (var i = pn + 1; i <= pn; i++) {
                        str += '<a href="javascript:void(0);" onclick="goPage(' + i + ')">' + i + '</a>';
                    }
                }

                $("#fyNum").html(str);
            }

            function showCar() {

                var userId = [[${session.loginUser}]].id;

                $.ajax({
                    url: allPath + "/car/showCar.do",
                    data: {
                        /*
                            需要传当前用户的id
                         */
                        "userId": userId
                    },
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        /*
                            前端页面需要该用户添加到购物车中的商品列表
                            dataList:
                                ["orderList":{商品1},{商品2},{商品3}]
                         */
                        var html = "";
                        var price = 0;
                        var num = 0;
                        $.each(data, function (i, n) {

                            html += '<li>';
                            html += '<div class="img">';
                            html += '<a href="#">';
                            html += '<img src="' + allPath + n.imageUrl + '" width="58" height="58"/>';
                            html += '</a>';
                            html += '</div>';
                            html += '<div class="name">';
                            html += '<a href="#">' + n.productName + '</a>';
                            html += '</div>';
                            html += '<div class="price"><font color="#ff4e00">￥' + n.price + '</font>X' + n.number + '</div>';
                            html += '</li>';
                            price += (n.price * n.number);
                            num += n.number;
                        })
                        $("#carList").html(html)
                        $("#carNum").html(num);
                        $("#totalPrice").html(price);
                    }
                })
            }


        </script>
    </head>
    <body>
        <!--Begin Header Begin-->
        <div class="soubg">
            <div class="sou">
                <!--Begin 所在收货地区 Begin-->
                <span class="s_city_b">
        	<span class="fl">送货至：</span>
            <span class="s_city">
            	<span>四川</span>
                <div class="s_city_bg">
                	<div class="s_city_t"></div>
                    <div class="s_city_c">
                    	<h2>请选择所在的收货地区</h2>
                        <table border="0" class="c_tab" style="width:235px; margin-top:10px;" cellspacing="0"
                               cellpadding="0">
                          <tr>
                            <th>A</th>
                            <td class="c_h"><span>安徽</span><span>澳门</span></td>
                          </tr>
                          <tr>
                            <th>B</th>
                            <td class="c_h"><span>北京</span></td>
                          </tr>
                          <tr>
                            <th>C</th>
                            <td class="c_h"><span>重庆</span></td>
                          </tr>
                          <tr>
                            <th>F</th>
                            <td class="c_h"><span>福建</span></td>
                          </tr>
                          <tr>
                            <th>G</th>
                            <td class="c_h"><span>广东</span><span>广西</span><span>贵州</span><span>甘肃</span></td>
                          </tr>
                          <tr>
                            <th>H</th>
                            <td class="c_h"><span>河北</span><span>河南</span><span>黑龙江</span><span>海南</span><span>湖北</span><span>湖南</span></td>
                          </tr>
                          <tr>
                            <th>J</th>
                            <td class="c_h"><span>江苏</span><span>吉林</span><span>江西</span></td>
                          </tr>
                          <tr>
                            <th>L</th>
                            <td class="c_h"><span>辽宁</span></td>
                          </tr>
                          <tr>
                            <th>N</th>
                            <td class="c_h"><span>内蒙古</span><span>宁夏</span></td>
                          </tr>
                          <tr>
                            <th>Q</th>
                            <td class="c_h"><span>青海</span></td>
                          </tr>
                          <tr>
                            <th>S</th>
                            <td class="c_h"><span>上海</span><span>山东</span><span>山西</span><span class="c_check">四川</span><span>陕西</span></td>
                          </tr>
                          <tr>
                            <th>T</th>
                            <td class="c_h"><span>台湾</span><span>天津</span></td>
                          </tr>
                          <tr>
                            <th>X</th>
                            <td class="c_h"><span>西藏</span><span>香港</span><span>新疆</span></td>
                          </tr>
                          <tr>
                            <th>Y</th>
                            <td class="c_h"><span>云南</span></td>
                          </tr>
                          <tr>
                            <th>Z</th>
                            <td class="c_h"><span>浙江</span></td>
                          </tr>
                        </table>
                    </div>
                </div>
            </span>
        </span>
                <!--End 所在收货地区 End-->
                <span class="fr">
        	<span class="fl">
                你好，
                <span th:if="${session.loginUser eq null}">
                    请<a th:href="@{/Login.do}">登录</a>
                </span>
                <span th:unless="${session.loginUser eq null}" th:text="${session.loginUser.username}"></span>
                &nbsp;
                <a th:href="@{/Register.do}" style="color:#ff4e00;">免费注册</a>&nbsp;|&nbsp;
                <a href="javaScript:void(0)" onclick="window.location.href=allPath+'/product/Order.do'">我的订单</a>&nbsp;|
                <a href="javaScript:void(0)" onclick="window.location.href=allPath+'/user/loginOut.do'">退出登录</a>&nbsp;|
            </span>
        	<span class="ss">
            	<div class="ss_list">
                	<a href="#">收藏夹</a>
                    <div class="ss_list_bg">
                    	<div class="s_city_t"></div>
                        <div class="ss_list_c">
                        	<ul>
                            	<li><a th:href="@{/product/Collect.do}">我的收藏夹</a></li>
                                <li><a th:href="@{/product/Collect.do}">我的收藏夹</a></li>
                            </ul>
                        </div>
                    </div>     
                </div>
                <div class="ss_list">
                	<a href="#">客户服务</a>
                    <div class="ss_list_bg">
                    	<div class="s_city_t"></div>
                        <div class="ss_list_c">
                        	<ul>
                            	<li><a href="#">客户服务</a></li>
                                <li><a href="#">客户服务</a></li>
                                <li><a href="#">客户服务</a></li>
                            </ul>
                        </div>
                    </div>    
                </div>
                <div class="ss_list">
                	<a th:href="@{/Index.do}">网站导航</a>
                    <div class="ss_list_bg">
                    	<div class="s_city_t"></div>
                        <div class="ss_list_c">
                        	<ul>
                            	<li><a th:href="@{/Index.do}">网站导航</a></li>
                                <li><a th:href="@{/Index.do}">网站导航</a></li>
                            </ul>
                        </div>
                    </div>    
                </div>
            </span>
            <span class="fl">|&nbsp;关注我们：</span>
            <span class="s_sh"><a href="#" class="sh1">新浪</a><a href="#" class="sh2">微信</a></span>
            <span class="fr">|&nbsp;<a href="#">手机版&nbsp;<img th:src="@{/images/s_tel.png}"
                                                              align="absmiddle"/></a></span>
        </span>
            </div>
        </div>
        <div class="m_top_bg">
            <div class="top">
                <div class="m_logo"><a th:href="@{/Index.do}"><img th:src="@{/images/logo1.png}"/></a></div>
                <div class="m_search">
                    <form>
                        <input type="text" value="" class="m_ipt"/>
                        <input type="submit" value="搜索" class="m_btn"/>
                    </form>
                    <span class="fl"><a href="#">咖啡</a><a href="#">iphone 6S</a><a href="#">新鲜美食</a><a href="#">蛋糕</a><a
                            href="#">日用品</a><a href="#">连衣裙</a></span>
                </div>
                <div class="i_car">
                    <div class="car_t">购物车 [ <span id="carNum"></span> ]</div>
                    <div class="car_bg">
                        <!--Begin 购物车未登录 Begin-->
                        <!--<div class="un_login">还未登录！<a th:href="@{/Login.do}" style="color:#ff4e00;">马上登录</a> 查看购物车！-->
                        <!--</div>-->
                        <div th:if="${session.loginUser eq null}">
                            <div class="un_login">还未登录！
                                <a th:href="@{/Login.do?action='toLogin'}" style="color:#ff4e00;">马上登录</a>
                            </div>
                        </div>
                        <div class="un_login" th:unless="${session.loginUser eq null}">
                            <span th:text="${session.loginUser.username}"></span>&nbsp;&nbsp;&nbsp;<a
                                th:href="@{/car/BuyCar.do}" style="color:#ff4e00;">查看购物车</a>
                        </div>
                        <!--End 购物车未登录 End-->
                        <!--Begin 购物车已登录 Begin-->
                        <ul class="cars" id="carList">
                            <!--<li>
                                <div class="img"><a href="#"><img th:src="@{/images/car1.jpg}" width="58" height="58" /></a></div>
                                <div class="name"><a href="#">法颂浪漫梦境50ML 香水女士持久清新淡香 送2ML小样3只</a></div>
                                <div class="price"><font color="#ff4e00">￥399</font> X1</div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/car2.jpg}" width="58" height="58" /></a></div>
                                <div class="name"><a href="#">香奈儿（Chanel）邂逅活力淡香水50ml</a></div>
                                <div class="price"><font color="#ff4e00">￥399</font> X1</div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img th:src="@{/images/car2.jpg}" width="58" height="58" /></a></div>
                                <div class="name"><a href="#">香奈儿（Chanel）邂逅活力淡香水50ml</a></div>
                                <div class="price"><font color="#ff4e00">￥399</font> X1</div>
                            </li>-->
                        </ul>
                        <
                        <div class="price_sum">共计&nbsp; <font color="#ff4e00">￥</font><span id="totalPrice"></span>
                        </div>
                        <div class="price_a"><a th:href="@{/car/BuyCar.do}">去购物车结算</a></div>
                        <!--End 购物车已登录 End-->
                    </div>
                </div>
            </div>
        </div>
        <!--End Header End-->
        <div class="i_bg bg_color">
            <!--Begin 用户中心 Begin -->
            <div class="m_content">
                <div class="m_left">
                    <!--<div class="left_n">管理中心</div>
                    <div class="left_m">
                        <div class="left_m_t t_bg1">订单中心</div>
                        <ul>
                            <li><a href="Member_Order.html" class="now">我的订单</a></li>
                            <li><a href="Member_Address.html">收货地址</a></li>
                            <li><a href="#">缺货登记</a></li>
                            <li><a href="#">跟踪订单</a></li>
                        </ul>
                    </div>
                    <div class="left_m">
                        <div class="left_m_t t_bg2">会员中心</div>
                        <ul>
                            <li><a href="Member_User.html">用户信息</a></li>
                            <li><a href="Member_Collect.html">我的收藏</a></li>
                            <li><a href="Member_Msg.html">我的留言</a></li>
                            <li><a href="Member_Links.html">推广链接</a></li>
                            <li><a href="#">我的评论</a></li>
                        </ul>
                    </div>
                    <div class="left_m">
                        <div class="left_m_t t_bg3">账户中心</div>
                        <ul>
                            <li><a href="Member_Safe.html">账户安全</a></li>
                            <li><a href="Member_Packet.html">我的红包</a></li>
                            <li><a href="Member_Money.html">资金管理</a></li>
                        </ul>
                    </div>
                    <div class="left_m">
                        <div class="left_m_t t_bg4">分销中心</div>
                        <ul>
                            <li><a href="Member_Member.html">我的会员</a></li>
                            <li><a href="Member_Results.html">我的业绩</a></li>
                            <li><a href="Member_Commission.html">我的佣金</a></li>
                            <li><a href="Member_Cash.html">申请提现</a></li>
                        </ul>
                    </div>-->
                </div>
                <div class="m_right">
                    <p></p>
                    <div class="mem_tit">我的订单</div>
                    <table border="0" class="order_tab" style="width:930px; text-align:center; margin-bottom:30px;"
                           cellspacing="0" cellpadding="0">
                        <thead>
                        <tr>
                            <td width="20%">订单号</td>
                            <td width="25%">下单时间</td>
                            <td width="13%">订单总金额</td>
                            <td width="30%">地址信息</td>
                            <td width="12%">配送方式</td>
                        </tr>
                        </thead>
                        <tbody id="orderBody">
                        <!--<tr>
                            <td><font color="#ff4e00">2015092823056</font></td>
                            <td>2015-09-26 16:45:20</td>
                            <td>￥456.00</td>
                            <td>未确认，未付款，未发货</td>
                            <td>取消订单</td>
                        </tr>
                        <tr>
                            <td><font color="#ff4e00">2015092823056</font></td>
                            <td>2015-09-26 16:45:20</td>
                            <td>￥456.00</td>
                            <td>已确认，已付款，已发货</td>
                            <td><font color="#ff4e00">已确认</font></td>
                        </tr>
                        <tr>
                            <td><font color="#ff4e00">2015092823056</font></td>
                            <td>2015-09-26 16:45:20</td>
                            <td>￥456.00</td>
                            <td>未确认，未付款，未发货</td>
                            <td>取消订单</td>
                        </tr>
                        <tr>
                            <td><font color="#ff4e00">2015092823056</font></td>
                            <td>2015-09-26 16:45:20</td>
                            <td>￥456.00</td>
                            <td>已确认，已付款，已发货</td>
                            <td><font color="#ff4e00">已确认</font></td>
                        </tr>
                        <tr>
                            <td><font color="#ff4e00">2015092823056</font></td>
                            <td>2015-09-26 16:45:20</td>
                            <td>￥456.00</td>
                            <td>未确认，未付款，未发货</td>
                            <td>取消订单</td>
                        </tr>
                        <tr>
                            <td><font color="#ff4e00">2015092823056</font></td>
                            <td>2015-09-26 16:45:20</td>
                            <td>￥456.00</td>
                            <td>已确认，已付款，已发货</td>
                            <td><font color="#ff4e00">已确认</font></td>
                        </tr>
                        <tr>
                            <td><font color="#ff4e00">2015092823056</font></td>
                            <td>2015-09-26 16:45:20</td>
                            <td>￥456.00</td>
                            <td>未确认，未付款，未发货</td>
                            <td>取消订单</td>
                        </tr>-->
                        </tbody>
                    </table>
                    <div class="pages" id="fyInfo">
                        <a th:href="@{javascript:void(0)}" class="p_pre" onclick="goPage(1)">首页</a>
                        <a href="javascript:void(0);" class="p_pre" onclick="goPage(pn-1)">上一页</a>
                        <span id="fyNum">
                                <!--<a href="#" class="cur">1</a>-->
                            <!--<a href="#">2</a>-->
                            <!--<a href="#">3</a>-->
                            <!--...-->
                            <!--<a href="#">20</a>-->
                            </span>
                        <a href="javascript:void(0);" class="p_pre" onclick="goPage(pn+1)">下一页</a>
                        <a href="javascript:void(0);" class="p_pre" onclick="goPage(lp)">末页</a>
                        <label>
                            <input id="pageNum" type="text" name="pageNum"
                                   style="width: 30px;height: 36px;margin-bottom: 25px;">
                        </label><a href="javascript:void(0);" onclick="goPageByNum()">GO</a>
                        <label>
                            <select onchange="selectChange(this)">
                                <option>2</option>
                                <option>4</option>
                                <option>6</option>
                                <option>8</option>
                            </select>
                        </label>
                        <span id="pageInfo"></span>
                    </div>

                    <!--<div class="mem_tit">合并订单</div>
                    <table border="0" class="order_tab" style="width:930px;" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="135" align="right">主订单</td>
                            <td width="220">
                                <select class="jj" name="order1">
                                    <option value="0" selected="selected">请选择...</option>
                                    <option value="1">2015092626589</option>
                                    <option value="2">2015092626589</option>
                                    <option value="3">2015092626589</option>
                                    <option value="4">2015092626589</option>
                                </select>
                            </td>
                            <td width="135" align="right">从订单</td>
                            <td width="220">
                                <select class="jj" name="order2">
                                    <option value="0" selected="selected">请选择...</option>
                                    <option value="1">2015092626589</option>
                                    <option value="2">2015092626589</option>
                                    <option value="3">2015092626589</option>
                                    <option value="4">2015092626589</option>
                                </select>
                            </td>
                            <td>
                                <div class="btn_u"><a href="#">合并订单</a></div>
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td colspan="4" style="font-family:'宋体'; padding:20px 10px 50px 10px;">
                                订单合并是在发货前将相同状态的订单合并成一新的订单。 <br/>
                                收货地址，送货方式等以主定单为准。
                            </td>
                        </tr>
                    </table>-->
                </div>
            </div>
            <!--End 用户中心 End-->
            <!--Begin Footer Begin -->
            <div class="b_btm_bg b_btm_c">
                <div class="b_btm">
                    <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                           cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="72"><img th:src="@{/images/b1.png}" width="62" height="62"/></td>
                            <td><h2>正品保障</h2>正品行货 放心购买</td>
                        </tr>
                    </table>
                    <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                           cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="72"><img th:src="@{/images/b2.png}" width="62" height="62"/></td>
                            <td><h2>满38包邮</h2>满38包邮 免运费</td>
                        </tr>
                    </table>
                    <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                           cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="72"><img th:src="@{/images/b3.png}" width="62" height="62"/></td>
                            <td><h2>天天低价</h2>天天低价 畅选无忧</td>
                        </tr>
                    </table>
                    <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                           cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="72"><img th:src="@{/images/b4.png}" width="62" height="62"/></td>
                            <td><h2>准时送达</h2>收货时间由你做主</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="b_nav">
                <dl>
                    <dt><a href="#">新手上路</a></dt>
                    <dd><a href="#">售后流程</a></dd>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">订购方式</a></dd>
                    <dd><a href="#">隐私声明</a></dd>
                    <dd><a href="#">推荐分享说明</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">配送与支付</a></dt>
                    <dd><a href="#">货到付款区域</a></dd>
                    <dd><a href="#">配送支付查询</a></dd>
                    <dd><a href="#">支付方式说明</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">会员中心</a></dt>
                    <dd><a href="#">资金管理</a></dd>
                    <dd><a href="#">我的收藏</a></dd>
                    <dd><a href="#">我的订单</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">服务保证</a></dt>
                    <dd><a href="#">退换货原则</a></dd>
                    <dd><a href="#">售后服务保证</a></dd>
                    <dd><a href="#">产品质量保证</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">联系我们</a></dt>
                    <dd><a href="#">网站故障报告</a></dd>
                    <dd><a href="#">购物咨询</a></dd>
                    <dd><a href="#">投诉与建议</a></dd>
                </dl>
                <div class="b_tel_bg">
                    <a href="#" class="b_sh1">新浪微博</a>
                    <a href="#" class="b_sh2">腾讯微博</a>
                    <p>
                        服务热线：<br/>
                        <span>400-123-4567</span>
                    </p>
                </div>
                <div class="b_er">
                    <div class="b_er_c"><img th:src="@{/images/er.gif}" width="118" height="118"/></div>
                    <img th:src="@{/images/ss.png}"/>
                </div>
            </div>
            <div class="btmbg">
                <div class="btm">
                    备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright © 2015-2018 尤洪商城网 All Rights Reserved. 复制必究 ,
                    Technical Support: Dgg Group <br/>
                    <img th:src="@{/images/b_1.gif}" width="98" height="33"/><img th:src="@{/images/b_2.gif}" width="98"
                                                                                  height="33"/><img
                        th:src="@{/images/b_3.gif}" width="98" height="33"/><img th:src="@{/images/b_4.gif}" width="98"
                                                                                 height="33"/><img
                        th:src="@{/images/b_5.gif}" width="98" height="33"/><img th:src="@{/images/b_6.gif}" width="98"
                                                                                 height="33"/>
                </div>
            </div>
            <!--End Footer End -->
        </div>

    </body>


    <!--&lt;!&ndash;[if IE 6]>-->
    <!--<script src="//letskillie6.googlecode.com/svn/trunk/2/zh_CN.js}"></script>-->
    <!--<![endif]&ndash;&gt;-->
</html>
